import React, { Component } from "react";

import { Link } from "react-router-dom";

import { Carousel, Flex, Grid } from "antd-mobile";
import { getCurrentCity } from '../../../utils/location';

import "./index.less";

import Nav1 from "../../../assets/images/nav-1.png";
import Nav2 from "../../../assets/images/nav-2.png";
import Nav3 from "../../../assets/images/nav-3.png";
import Nav4 from "../../../assets/images/nav-4.png";

const NavList = [
  { name: "整租", src: Nav1, path: "/home/houselist" },
  { name: "合租", src: Nav2, path: "/home/houselist" },
  { name: "地图找房", src: Nav3, path: "/home" },
  { name: "去出租", src: Nav4, path: "/home" },
];

//获取城市信息
navigator.geolocation.getCurrentPosition((position) => {
  console.log("当前位置信息", position);
});

export default class Index extends Component {
  state = {
    swiperList: [],
    groupsList: [],
    newsList: [],
    cityName: "定位中",
  };
  // 轮播图数据
  async getSwiperList() {
    // fetch('http://127.0.0.1:8080/home/swiper')
    // .then(res /*二进制数据流 */=>res.json())
    // .then(res=>console.log(res))
    // 拿到的是二进制数据流
    const res = await (await fetch("http://127.0.0.1:8080/home/swiper")).json();
    console.log(res);
    if (res.status === 200) {
      this.setState({ swiperList: res.body });
    }
  }
  //导航条数据
  async getGroupsList() {
    const res = await (
      await fetch(
        "http://127.0.0.1:8080/home/groups?area=AREA%7C88cff55c-aaa4-e2e0"
      )
    ).json();
    console.log(res);
    if (res.status === 200) this.setState({ groupsList: res.body });
  }
  //新闻资讯数据
  async getnewsList() {
    const res = await (
      await fetch(
        "http://127.0.0.1:8080/home/news?area=AREA%7C88cff55c-aaa4-e2e0"
      )
    ).json();
    console.log(res);
    if (res.status === 200) this.setState({ newsList: res.body });
  }

  // 获取数据
  async getCityName() {
    const { label } = await getCurrentCity();
    this.setState({ cityName: label })
    // const cuCity = new window.BMap.LocalCity();
    // cuCity.get(async (result) => {
    //   const res = await (
    //     await fetch("http://127.0.0.1:8080/area/info?name=" + result.name)
    //   ).json();

    //   if (res.status === 200) this.setState({ cityName: res.body.label });
    // });
  }

  // 调用
  componentDidMount() {
    this.getCityName();
    this.getnewsList();
    this.getGroupsList();
    this.getSwiperList();
  }

  render() {
    return (
      <div className="index">
        {/* 轮播图区域 */}
        <Carousel key={this.state.swiperList.length} autoplay infinite>
          {this.state.swiperList.map((i) => (
            <a
              key={i.id}
              // href="javascript:;"
              style={{
                display: "inline-block",
                width: "100%",
                height: 212,
              }}
            >
              <img
                src={`http://127.0.0.1:8080${i.imgSrc}`}
                alt=""
                style={{ width: "100%", verticalAlign: "top" }}
              />
            </a>
          ))}
        </Carousel>

        {/* 搜索框 */}
        <Flex className="search-box">
          {/* 左侧白色区域 */}
          <Flex className="search">
            {/* 位置 */}
            <div
              className="location"
              onClick={() => this.props.history.push("/citylist")}
            >
              <span className="name">{this.state.cityName}</span>
              {/* //{this.state.curCityName} */}
              <i className="iconfont icon-arrow" />
            </div>

            {/* 搜索表单 */}
            <div
              className="form"
              // onClick={() => this.props.history.push("/search")}
            >
              <i className="iconfont icon-seach" />
              <span className="text">请输入小区或地址</span>
            </div>
          </Flex>
          {/* 右侧地图图标 */}
          <i
            className="iconfont icon-map"
            onClick={() => this.props.history.push("/map")}
          />
        </Flex>

        {/* 导航条区域 */}
        <Flex className="navbar">
          {NavList.map((i, idx) => (
            <Flex.Item
              key={i.name}
              onClick={() =>
                this.props.history[
                  i.path.startsWith("/home") ? "replace" : "path"
                ](i.path)
              }
            >
              <img src={i.src} alt="" />
              <span>{i.name}</span>
            </Flex.Item>
          ))}
        </Flex>

        {/* 租房小组 */}
        <div className="group-title">
          <div>租房小组</div>
          <Link to="/home/list">更多</Link>
        </div>
        <Grid
          className="group-list"
          data={this.state.groupsList}
          columnNum={2}
          square={false}
          hasLine={false}
          renderItem={(item) => (
            <div className="group-item">
              {/* 左边：标题、简介 */}
              <div>
                <div className="group-item-title">{item.title}</div>
                <div className="group-item-desc">{item.desc}</div>
              </div>
              {/* 右边：图片 */}
              <img src={"http://127.0.0.1:8080" + item.imgSrc} alt="" />
            </div>
          )}
        />

        {/* 新闻列表 */}
        <div className="news">
          <div>最新资讯</div>
        </div>
        <div className="news-item">
          {this.state.newsList.map((i, idx) => (
            <div className="news-list" key={idx}>
              <img
                src={`http://127.0.0.1:8080${i.imgSrc}`}
                alt=""
                // style={{ width: "100%", verticalAlign: "top" }}
              />
              <div className="news-data">
                <div className="title">{i.title}</div>
                <div className="info">
                  <span>{i.from}</span>
                  <span>{i.date}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}
